<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap.css" />
		<!--<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.css"/>-->
		<link rel="stylesheet" type="text/css" href="font_ziti/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="Swiper-3.4.2/dist/css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="Swiper-3.4.2/dist/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>

		</style>
	</head>

	<body>
		<!--导航-->
		<div class="nav1">
			<div class="content">
				<div class="nav1_left">
					<img src="img/m_logo.png" />
				</div>
				<div class="nav1_right">
					<ul class="nav1_right_ul">
						<li>
							<a href="#" class="active">首页</a>
						</li>
						<li>
							<a href="#">菜单一</a>
						</li>
						<li>
							<a href="#">菜单二</a>
						</li>
						<li class="nav1_right_input" id="search"><input type="search" class="search" placeholder="搜索" /></li>
					</ul>
				</div>
			</div>

		</div>

		<!--主体部分-->
		<div class="main">
			<div class="content">
				<div class="main_left">
					<div class="main_swiper">
						<div class="main_swiper_head">
							<div class="main_nav_icon">
								<i class="icon iconfont icon-xiaoxi"></i>
							</div>
							<!-- Swiper -->
							<div class="swiper-container swiper_container_head">

								<div class="swiper-wrapper swiper_wrapper_slide">
									<div class="swiper-slide">Slide 1</div>
									<div class="swiper-slide">Slide 2</div>
									<div class="swiper-slide">Slide 3</div>
									<div class="swiper-slide">Slide 4</div>
									<div class="swiper-slide">Slide 1</div>
								</div>
								<!-- Add Pagination -->
								<!--<div class="swiper-pagination"></div>
					        <!-- Add Arrows -->
								<!--<div class="swiper-button-next"></div>
					        <div class="swiper-button-prev"></div>-->
							</div>

							<!-- Swiper JS -->

							<!-- Initialize Swiper -->
							<script>
								var swiper = new Swiper('.swiper-container', {
									pagination: '.swiper-pagination',
									//      nextButton: '.swiper-button-next',
									//      prevButton: '.swiper-button-prev',
									paginationClickable: true,
									//      spaceBetween: 30,
									//      centeredSlides: true,
									autoplay: 10000,
									direction: 'vertical',
									//      autoplayDisableOnInteraction: false
								});
							</script>
						</div>
					</div>
					<!--左侧区域-->

					<div class="main_swiper_body">
						<!-- bannner区域 -->
						<div class="banner_box">
							<!-- 左边大banner -->
							<div class="banner_box_left">
								<div class="swiper_img">
									<div class="swiper-container swiper-container1 swiper_container_img">
										<div class="swiper-wrapper swiper_wrapper_img">
											<div class="swiper-slide"><img src="img/icon-logo-512.png" />
												<div class="position_title">bannner标题1</div>
											</div>
											<div class="swiper-slide"><img src="img/weibo.jpg" />
												<div class="position_title">bannner标题2</div>
											</div>
											<div class="swiper-slide"><img src="img/qrcode.jpg" />
												<div class="position_title">bannner标题3</div>
											</div>
											<div class="swiper-slide"><img src="img/weibo.jpg" />
												<div class="position_title">bannner标题4</div>
											</div>
											<div class="swiper-slide"><img src="img/weibo.jpg" />
												<div class="position_title">bannner标题5</div>
											</div>
										</div>
										<!-- Add Pagination -->
										<div class="swiper-pagination"></div>
										<!-- Add Arrows -->
										<!--<div class="swiper-button-next"></div>
													<div class="swiper-button-prev"></div>-->
									</div>
								</div>
							</div>
							<!-- 右边四个小banner容器 -->
							<div class="banner_box_right">
								<!-- 这里放了三个小图单元，自动往下排列 -->
								<div class="list_item">
									<img src="img/m_logo.png" alt="">
									<div class="list_item_title">
										这是小图的标题
									</div>
								</div>

								<div class="list_item">
									<img src="img/m_logo.png" alt="">
									<div class="list_item_title">
										这是小图的标题
									</div>
								</div>

								<div class="list_item">
									<img src="img/m_logo.png" alt="">
									<div class="list_item_title">
										这是小图的标题
									</div>
								</div>
								<div class="list_item">
									<img src="img/m_logo.png" alt="">
									<div class="list_item_title">
										这是小图的标题
									</div>
								</div>
							</div>
						</div>
						<!-- Swiper -->

						<!-- Initialize Swiper -->
						<script>
							var swiper = new Swiper('.swiper-container1', {
								pagination: '.swiper-pagination',
								paginationClickable: true,
								autoplay: 5000,
							});
						</script>
					</div>

					<!--文章列表-->

					<div class="article_list">
						<div class="article_l_box">
							<div class="article_list_l">
								<img src="img/icon-logo-512.png" />
							</div>
							<div class="article_list_r">
								<h4>未实名不得跟帖 推进网络秩序建设不断精细</h4>
								<div class="article_list_technology">
									<div class="article_list_s">
										<span>技术基础</span>
										<span><i class="icon iconfont icon-remind_fill"></i>2天前</span>
										<span><i class="icon iconfont icon-xianshikejian"></i>50</span>
									</div>

									<div class="article_list_p">
										I hurt myself today, to see if i still feel. I focus on the pain, the only thing that's real. The needle tears a hole, the old familiar sting, try to kill it all away,
									</div>

									<div class="article_list_span">
										<span>标签1</span>
										<span>标签2</span>
										<span>标签3</span>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="article_list">
						<div class="article_l_box">
							<div class="article_list_l">
								<img src="img/icon-logo-512.png" />
							</div>
							<div class="article_list_r">
								<h4>未实名不得跟帖 推进网络秩序建设不断精细</h4>
								<div class="article_list_technology">
									<div class="article_list_s">
										<span>技术基础</span>
										<span><i class="icon iconfont icon-remind_fill"></i>2天前</span>
										<span><i class="icon iconfont icon-xianshikejian"></i>50</span>
									</div>

									<div class="article_list_p">
										I hurt myself today, to see if i still feel. I focus on the pain, the only thing that's real. The needle tears a hole, the old familiar sting, try to kill it all away,
									</div>

									<div class="article_list_span">
										<span>标签1</span>
										<span>标签2</span>
										<span>标签3</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="article_list">
						<div class="article_l_box">
							<div class="article_list_l">
								<img src="img/icon-logo-512.png" />
							</div>
							<div class="article_list_r">
								<h4>未实名不得跟帖 推进网络秩序建设不断精细</h4>
								<div class="article_list_technology">
									<div class="article_list_s">
										<span>技术基础</span>
										<span><i class="icon iconfont icon-remind_fill"></i>2天前</span>
										<span><i class="icon iconfont icon-xianshikejian"></i>50</span>
									</div>

									<div class="article_list_p">
										I hurt myself today, to see if i still feel. I focus on the pain, the only thing that's real. The needle tears a hole, the old familiar sting, try to kill it all away,
									</div>

									<div class="article_list_span">
										<span>标签1</span>
										<span>标签2</span>
										<span>标签3</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="article_list">
						<div class="article_l_box">
							<div class="article_list_l">
								<img src="img/icon-logo-512.png" />
							</div>
							<div class="article_list_r">
								<h4>未实名不得跟帖 推进网络秩序建设不断精细</h4>
								<div class="article_list_technology">
									<div class="article_list_s">
										<span>技术基础</span>
										<span><i class="icon iconfont icon-remind_fill"></i>2天前</span>
										<span><i class="icon iconfont icon-xianshikejian"></i>50</span>
									</div>

									<div class="article_list_p">
										I hurt myself today, to see if i still feel. I focus on the pain, the only thing that's real. The needle tears a hole, the old familiar sting, try to kill it all away,
									</div>

									<div class="article_list_span">
										<span>标签1</span>
										<span>标签2</span>
										<span>标签3</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="article_list">
						<div class="article_l_box">
							<div class="article_list_l">
								<img src="img/icon-logo-512.png" />
							</div>
							<div class="article_list_r">
								<h4>未实名不得跟帖 推进网络秩序建设不断精细</h4>
								<div class="article_list_technology">
									<div class="article_list_s" id="article_list_s">
										<span>技术基础</span>
										<span><i class="icon iconfont icon-remind_fill"></i>2天前</span>
										<span><i class="icon iconfont icon-xianshikejian"></i>50</span>
									</div>

									<div class="article_list_p">
										I hurt myself today, to see if i still feel. I focus on the pain, the only thing that's real. The needle tears a hole, the old familiar sting, try to kill it all away,
									</div>

									<div class="article_list_span">
										<span>标签1</span>
										<span>标签2</span>
										<span>标签3</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!--右侧-->
				<div class="main_right_box">
					<div class="main_right">
						<div class="main_right_s">
							<img src="img/weibo.jpg" />
						</div>
						<div class="main_right_x">
							<img src="img/icon-logo-512.png" />
							<span>come on!</span>
							<p>hello world!</p>
							<div class="span_icon">
								<span><i class="icon iconfont icon-people_fill"></i></span>
								<span><i class="icon iconfont icon-remind_fill"></i></span>
								<span><i class="icon iconfont icon-systemprompt_fill"></i></span>
							</div>

						</div>
					</div>
				</div>

				<!--热门文章-->
				<div class="popular_articles">
					<div class="popular_articles_icon">
						<i class="icon iconfont icon-createtask"></i>
						<span>热门文章</span>
					</div>

					<ul>
						<li>
							<a href="#">热门文章</a>
						</li>
						<li>
							<a href="#">热门文章</a>
						</li>
						<li>
							<a href="#">热门文章</a>
						</li>
						<li>
							<a href="#">热门文章</a>
						</li>
						<li>
							<a href="#">热门文章</a>
						</li>
					</ul>
				</div>

				<!--最新评论-->
				<div class="new_comments">
					<div class="new_comments_icon">
						<i class="icon iconfont icon-createtask"></i>
						<span>最新评论</span>
					</div>
					<ul>
						<li>
							<img src="img/icon-logo-512.png" alt="" />
							<span>fdsadf</span>
							<p>60亿机器人市场背后</p>
							<span>刚刚</span>
						</li>
						<li>
							<img src="img/icon-logo-512.png" alt="" />
							<span>fdsadf</span>
							<p>60亿机器人市场背后</p>
							<span>2小时前</span>
						</li>
						<li>
							<img src="img/icon-logo-512.png" alt="" />
							<span>fdsadf</span>
							<p>60亿机器人市场背后</p>
							<span>2017-02-12 21:11:12</span>
						</li>
						<li>
							<img src="img/icon-logo-512.png" alt="" />
							<span>fdsadf</span>
							<p>60亿机器人市场背后</p>
							<span>3分钟前</span>
						</li>
						<li>
							<img src="img/icon-logo-512.png" alt="" />
							<span>fdsadf</span>
							<p>60亿机器人市场背后</p>
							<span>2017-02-12 21:11:12</span>
						</li>
					</ul>
				</div>

				<!--广告位-->
				<div class="advertising">
					<div class="advertising_icon">
						<i class="icon iconfont icon-createtask"></i><span>广告位</span><i class="icon iconfont icon-createtask"></i>
					</div>
					<img src="img/icon-logo-512.png" alt="" />

				</div>
			</div>
			<!--分页-->

			<link rel="stylesheet" href="css3-responsive-paging/css/style6.css" media="screen" type="text/css" />
			<div class="container6 xlarge">
				<div class="pagination">
					<ul>
						<li>
							<a href="#"></a>
						</li>
						<li>
							<a href="#"></a>
						</li>
						<li class="active">
							<a href="#"></a>
						</li>
						<li>
							<a href="#"></a>
						</li>
						<li>
							<a href="#"></a>
						</li>
						<li>
							<a href="#"></a>
						</li>
						<li>
							<a href="#"></a>
						</li>
					</ul>
				</div>
			</div>
		</div>
			<!--底部-->
			<div class="foot">
				<div class="content">
					<div class="foot_s">							
						<div class="foot_left">
							<div class="foot_left_nav">
								<span><i class="icon iconfont icon-xiaoxi"></i>友情链接</span>
								<span>申请</span>
							</div>
							<div class="foot_ul">
								<ul class="foot_fhzx">
									<li><a href="#">凤凰资讯</a></li>
									<li><a href="#">凤凰资讯</a></li>
									<li><a href="#">凤凰资讯</a></li>
									<li><a href="#">凤凰资讯</a></li>
									<li><a href="#">凤凰资讯</a></li>
									<li><a href="#">凤凰资讯</a></li>
									<li><a href="#">凤凰资讯</a></li>
								</ul>
							</div>	
						</div>
						<div class="foot_right">
							<img src="img/qrcode.jpg" alt="" />
							<p>推进网络秩序建设不断精细推进网络秩序建设不断精细</p>
						</div>
					</div>					
				</div>
				<div class="foot_x">
					<div class="foot_p">
						<p class="foot_p1">Copyright&nbsp;&copy;&nbsp;2017&nbsp;sgblog&nbsp;|&nbsp;鄂ICP备00000号</p>
						<p class="foot_p2">本站部分资源来源于互联网网友交流,只供网络测试和学习交流所用、所有版权归原权利人，如有关资源侵犯了你的权益，请联系告之，我们将于第一时间删除！</p>
					</div>
				</div>
				
			</div>

	</body>

</html>